<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { adddoc, getdirList } from '@/api/dashboard';
  import { FormInstance, Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { useUserStore } from '@/store';
  import { deepTree, transformDeptTreeSelect } from '@/utils/utils';
  import usePageStore from '@/store/modules/page';
  const formRef = ref<FormInstance | null>(null);
  const props = defineProps({
    visible: Boolean,
    params: Object,
  });
  const loadingA = ref(true);
  const { loading, setLoading } = useLoading();
  defineOptions({
    name: 'publifFileAdd',
  });
  const userStore = useUserStore();
  const pageStore = usePageStore();

  const treeData = ref([]); // 目录列表

  watch(
    () => props.params,
    () => {
      fetchData();
    },
    {
      deep: true,
      immediate: true,
    }
  );

  const formType = ref();
  async function fetchData() {
    const res = await getdirList({ dir_type: pageStore.currentDirType });
    console.log(userStore.allDept);
    treeData.value = deepTree(
      'dir_name',
      res.data,
      'dir_id',
      'dir_id',
      'Files'
    );
    formType.value = [
      {
        name: 'doc_name',
        label: '文档名',
        type: 'a-input',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            message: '请输入',
            required: true,
          },
        ],
      },
      {
        name: 'doc_number',
        label: '文档编号',
        type: 'a-input',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            message: '请输入',
            required: true,
          },
        ],
      },
      {
        name: 'doc_type_id',
        label: '文档类型',
        type: 'a-select',
        selectOptions: userStore.allTypeFiles,
        fieldProps: {
          span: 24,
          fieldNames: { value: 'type_id', label: 'type_name' },
        },
        rules: [
          {
            message: '请选择',
            required: true,
          },
        ],
      },
      {
        name: 'doc_dir_id',
        label: '文档目录',
        type: 'a-tree-select',
        fieldProps: {
          span: 24,
          data: treeData.value ? treeData.value : [],
        },
        rules: [
          {
            message: '请选择',
            required: true,
          },
        ],
      },
      {
        name: 'doc_dept_id',
        label: '所属部门',
        type: 'a-tree-select',
        fieldProps: {
          span: 24,
          data: transformDeptTreeSelect(
            userStore.allDept,
            'dept_id',
            'dept_id'
          ),
        },
        rules: [
          {
            message: '请选择',
            required: true,
          },
        ],
      },
      {
        name: 'doc_desc',
        label: '文档摘要',
        type: 'a-textarea',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            message: '请输入',
            required: false,
          },
        ],
      },
      {
        label: '文档附件',
        name: 'doc_file',
        type: 'a-upload',
        fieldProps: {
          span: 24,
          action: 'global/upload',
          multiple: false,
          limit: 1,
          maxCount: 1,
          connectionName: 'doc_name',
        },
        rules: [
          {
            message: '请选择文件',
            required: true,
          },
        ],
      },
    ];
    loadingA.value = false;
  }
  const formData = ref({
    doc_name: '',
    doc_number: '',
    doc_type_id: '',
    doc_dir_id: pageStore.dirId ? pageStore.dirId : '',
    doc_dept_id: '',
    doc_desc: '',
    doc_file: '',
  });
  const emit = defineEmits(['update:visible', 'refresh']);

  const handleSubmit = async () => {
    if (!(await formRef.value?.checkForm())) {
      try {
        setLoading(true);
        const res = await adddoc({
          ...formRef.value?.formModel,
          doc_file: formRef.value?.formModel.doc_file[0].response[0],
        });
        Message.success(res.msg);
        emit('update:visible', false);
        emit('refresh');
        setLoading(false);
      } catch (error) {
        setLoading(false);
      }
    }
  };
</script>

<template>
  <a-modal
    title="新增文档"
    :visible="visible"
    @ok="handleSubmit"
    title-align="start"
    :ok-loading="loading"
    @cancel="
      () => {
        emit('update:visible', false);
      }
    "
  >
    <a-row justify="center">
      <a-spin v-if="loadingA" dot :loading="loadingA" />
      <pro-form
        v-if="!loadingA"
        ref="formRef"
        hiddenBtn
        :form-json="formType"
        :form-data="formData"
      ></pro-form>
    </a-row>
  </a-modal>
</template>

<style scoped lang="less">
  :deep(.arco-select-view-inner) {
    text-align: left !important;
  }
  .menu2 {
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    cursor: default !important;
    background: #f7f8fa;
  }
  :deep(.icon) {
    width: 1.2em !important;
    height: 1.2em !important;
  }

  :deep(.arco-tree-node-title-text) {
    font-size: 12px;
    width: 140px;
    overflow: hidden; /* 隐藏溢出内容 */
    white-space: nowrap; /* 禁止换行 */
    text-overflow: ellipsis; /* 显示省略号 */
  }

  :deep(.arco-tree-node-indent-block) {
    width: 0px !important;
  }

  :deep(.arco-tree-node-indent) {
  }
</style>
